<template>
  <section id="author">
    <el-card class="" shadow="never">
      <div slot="header">
        <span class="has-text-weight-bold">👨‍💻 关于作者</span>
      </div>
      <div class="has-text-centered">
        <p class="is-size-5 mb-5">
          <!-- <router-link :to="{ path: `/member/${user.username}/home` }">
            {{ user.alias }} <span class="is-size-7 has-text-grey">{{ '@' + user.username }}</span>
          </router-link> -->
          <a href="###">{{ this.user.username }}</a>
        </p>
        <div class="columns is-mobile">
          <div class="column is-half">
            <code>{{ this.user.postCount }}</code>
            <p>文章</p>
          </div>
          <div class="column is-half">
            <code>{{ this.user.followerCount }}</code>
            <p>粉丝</p>
          </div>
        </div>
        <div>
          <button
            v-if="hasFollow"
            class="button is-success button-center is-fullwidth"
            @click="handleUnFollow()"
          >
            已关注
          </button>

          <button v-else class="button is-link button-center is-fullwidth" @click="handleFollow()">
            关注
          </button>
        </div>
      </div>
    </el-card>
  </section>
</template>

<script>
import { follow, isFollow, unFollow } from '../../api/follow'
import { userInfoById } from "../../api/auth/auth"
import { mapGetters } from 'vuex'
export default {
  name: 'Author',
  props: {
    user: {
      type: Object,
    }
  },
  data() {
    return {
        //是否关注
      hasFollow: false
    }
  },
  mounted() {
    this.fetchInfo();
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  methods: {
      //对是否关注进行判断
    fetchInfo() {
      if(this.token != null && this.token !== '')
      {
        const fuser = JSON.parse(window.localStorage.getItem("user"));
        console.log(this.user.id);
        // isFollow(this.user.id,fuser.id).then(res=>{
        //     const result = res.data;
        //     if(result.code == 0){
        //         this.hasFollow = true;
        //     }else{
        //         this.hasFollow = false;
        //     }
        // })
      }
    },
    handleFollow: function() {
      if(this.token != null && this.token !== '')
      {
        const fuser = JSON.parse(window.localStorage.getItem("user"));
        console.log(this.user);
        follow(this.user.id,fuser.id).then(res=>{
            const result = res.data;
            if(result.code == 0){
                this.$message({
                    message: result.msg,
                    type: "success"
                })
                userInfoById(this.user.id).then(res=>{
                    const result =res.data;
                    this.user = result.data;
                });
                this.hasFollow = true;
            }else{
                this.$message({
                    message: result.msg,
                    type: "error"
                });
            }
        })
      }
      else{
        this.$message.success('请先登录');
      }
    },
    handleUnFollow() {
    if(this.token != null && this.token !== '')
      {
        const fuser = JSON.parse(window.localStorage.getItem("user"));
        unFollow(this.user.id,fuser.id).then(res=>{
            const result = res.data;
            if(result.code == 0){
                this.$message({
                    message: result.msg,
                    type: "success"
                });
                userInfoById(this.user.id).then(res=>{
                const result =res.data;
                this.user = result.data;
                });
                this.hasFollow = false;
            }else{
                this.$message({
                    message: result.msg,
                    type: "error"
                });
            }
        })
      }
    }
  }
}
</script>
<style scoped>

</style>
